<!--  -->
<template>
  <div class="home">
    <div class="bg"></div>
    <top />
    <div class="sidevideo">
      <video src="../../assets/video/02.mp4" autoplay loop muted></video>
    </div>
    <leftbar />
    <rightbar />
    <div class="main">
      <div class="mainLeft">
        <div class="myMap">
          <myMap />
        </div>
        <div class="mainLeftBottom">
          <mainLeftBottom />
        </div>
      </div>
      <div class="mainright">
        <div class="mainRightTop">
          <div class="mrtl">
            <mainRightTop />
          </div>
          <div class="mrtr">
            <topRightRight />
          </div>
        </div>
        <div class="mainRightMiddle">
          <mainRightCon />
        </div>
        <div class="mainRightFoot">
          <div class="mrfl">
            <myCircle />
          </div>
          <div class="mrfr">
            <mainRightFoot />
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottomMask"></div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import top from "./components/top.vue";
import leftbar from "./components/leftbar.vue";
import rightbar from "./components/rightbar.vue";
import myMap from "./components/map.vue";
import mainLeftBottom from "./components/main_left_bottom.vue";
import mainRightTop from "./components/main_right_top.vue";
import topRightRight from "./components/top_right_right.vue";
import mainRightCon from "./components/main_right_content.vue";
import mainRightFoot from "./components/main_right_footer.vue";
import myCircle from "./components/circle.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    top,
    leftbar,
    rightbar,
    myMap,
    mainLeftBottom,
    mainRightTop,
    topRightRight,
    mainRightCon,
    mainRightFoot,
    myCircle,
  },
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  mounted() {},
};
</script>
<style scoped>
.main {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  padding: 20px;
  padding-top: 100px;
}
.mainLeft {
  width: 49%;
  height: 100%;
  float: left;
}
.mainright {
  width: 49%;
  height: 100%;
  float: left;
  margin-left: -50px;
  position: relative;
}
.myMap {
  width: 50%;
  height: 40%;
  position: absolute;
  top: 110px;
  left: 10px;
}
.mainRightTop {
  position: absolute;
  top: 50px;
  width: 100%;
  height: 258px;
}
.mrtl,
.mrtr {
  width: 48%;
  height: 100%;
  float: left;
}
.mrtr {
  float: right;
}
.mainRightMiddle {
  position: absolute;
  top: 330px;
  width: 906px;
}
.mainRightFoot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 40%;
}
.mrfl {
  position: absolute;
  left: -30px;
  top: 0;
  transform: scale(0.8);
}
.mrfr {
  position: absolute;
  bottom: 0;
  right: -50px;
  transform: scale(0.8);
}
.mainLeftBottom {
  position: absolute;
  bottom: 120px;
  left: 90px;
  width: 620px;
  height: 253px;
}
.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../../assets/images/bg.png") no-repeat center center;
  background-size: cover;
  z-index: 2;
  animation: bgact 4s infinite;
}
@keyframes bgact {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.home {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  overflow: hidden;
}
.sidevideo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.bottom {
  mix-blend-mode: normal;
  opacity: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin: 0px;
  pointer-events: none;
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 115px;
  transition: myact1 600ms ease 0s;
  background: url("../../assets/images/bottom.png") no-repeat center center;
}
@keyframes myact1 {
  0% {
    opacity: 0;
    left: 30%;
  }
  50% {
    left: 50%;
    opacity: 1;
  }
  100% {
    left: 70%;
    opacity: 0;
  }
}
.bottomMask {
  width: 347px;
  height: 522px;
  border-radius: unset;
  cursor: pointer;
  pointer-events: auto;
  animation-name: myact1;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 4s;
  animation-delay: 0s;
  -webkit-user-drag: none;
  filter: none;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -173px;
  background: url("../../assets/images/iMZIjSTBu.png");
}
</style>